<%@ page language="java" contentType="text/html;charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<title>dubbo-client列表</title>
<link type="text/css" href="<%=path%>/css/style.css" rel="stylesheet" />
<style>
.jar-dubbo-div {
	display: none;
	margin-left: 20px;
}

.interface-div {
	display: none;
	margin-left: 20px;
}

.method-div {
	display: none;
	background: #EFEFEF;
	margin-top: 5px;
}

.enums-div,.model-div {
	display: none;
	margin-left: 20px;
}

.enum-constant-div,.model-fields-div {
	display: none;
}


.method-detail-div {
	position: fixed;
	z-index: 99999;
	top:0px;
	right:0px;
	width: 60%;
	background-color: #FFF;
	border-bottom: 1px solid #ebebeb;
	height: 100%;
	-webkit-box-shadow: #666 0px 0px 10px;
	-moz-box-shadow: #666 0px 0px 10px;
	box-shadow: #666 0px 0px 10px;
	display:none;
}
.close{
	margin:5px;
	padding:5px;
	background: #2d78f4;
	color:#fff;
}
.add{
	margin-left:5px;
	font-size:12px;
}
.content-div{
	margin:10px;
}


</style>
<script type="text/javascript" src="<%=path%>/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
    $(function(){
    	$(".jarName").click(function(){
    		var flag = $(this).attr("flag");
    		if(flag == "1"){
    			$(this).parents(".item-div").find(".jar-dubbo-div").hide();
    			$(this).attr("flag","0");
    		}else{
    			$(this).parents(".item-div").find(".jar-dubbo-div").show();
    			$(this).attr("flag","1");
    		}
    		
    		
    	});
    	
    	$(".interface-flag").click(function(){
    		
    		var flag = $(this).attr("flag");
    		if(flag == "1"){
    			$(this).parents(".item-div").find(".interface-div").hide();
    			$(this).attr("flag","0");
    		}else{
    			$(this).parents(".item-div").find(".interface-div").show();
    			$(this).attr("flag","1");
    		}
    		
    	});
    	
		$(".model-flag").click(function(){
    		
    		var flag = $(this).attr("flag");
    		if(flag == "1"){
    			$(this).parents(".item-div").find(".model-div").hide();
    			$(this).attr("flag","0");
    		}else{
    			$(this).parents(".item-div").find(".model-div").show();
    			$(this).attr("flag","1");
    		}
    		
    	});
		
		$(".enums-flag").click(function(){
    		
    		var flag = $(this).attr("flag");
    		if(flag == "1"){
    			$(this).parents(".item-div").find(".enums-div").hide();
    			$(this).attr("flag","0");
    		}else{
    			$(this).parents(".item-div").find(".enums-div").show();
    			$(this).attr("flag","1");
    		}
    		
    	});
    	
    	
    	$(".interfaceName").click(function(){
    		var flag = $(this).attr("flag");
    		if(flag == "1"){
    			$(this).parents(".interface-div").find(".method-div").hide();
    			$(this).attr("flag","0");
    		}else{
    			$(this).parents(".interface-div").find(".method-div").show();
    			$(this).attr("flag","1");
    		}
    	});
    	
    	$(".modelName").click(function(){
    		var flag = $(this).attr("flag");
    		if(flag == "1"){
    			$(this).parents(".model-div").find(".model-fields-div").hide();
    			$(this).attr("flag","0");
    		}else{
    			$(this).parents(".model-div").find(".model-fields-div").show();
    			$(this).attr("flag","1");
    		}
    		
    	});
    	
    	$(".enumName").click(function(){
    		var flag = $(this).attr("flag");
    		if(flag == "1"){
    			$(this).parents(".enums-div").find(".enum-constant-div").hide();
    			$(this).attr("flag","0");
    		}else{
    			$(this).parents(".enums-div").find(".enum-constant-div").show();
    			$(this).attr("flag","1");
    		}
    		
    	});
    	
    	
    	
    	$(".methodName").click(function(){
    		$(".methodName").removeClass("red");
    		$(this).addClass("red");
    		$(".content-div").html($(this).parent().find(".method-content-div").html());
    		$(".content-div table").css("width","98%");
    		$(".method-detail-div").show();
    	});
    	
    	$(".close").click(function(){
    		$(".method-detail-div").hide();
    		$(".content-div").html("");
    		
    	});
    	
    	
    });
    </script>
</head>
<body>
	<div class="header-div" style="text-align: left;">
		dubbo-client列表
		<a href="<%=path%>/test" class="add" target="_blank">[测试]</a>
		<a href="<%=path%>/monitor" class="add" target="_blank">[监控]</a>
	</div>
	<hr/>
	<div class="main-div">
		<c:forEach var="lst" items="${clients}">
			<div class="item-div">
				<div class="jar-name-div">
					<a href="javascript:void(0);" class="jarName">${lst.jarName }</a>&nbsp;<span style="color: red;">${lst.errorDesc }&nbsp;${lst.errorCode}</span>
				</div>
				<div class="jar-dubbo-div">
					<div>
						<a href="javascript:void(0);" class="interface-flag">interface</a>
					</div>
					<c:forEach var="ilst" items="${lst.dubboInterfaceList }">
						<div class="interface-div">
							<div class="interface-name">
								<a href="javascript:void(0);" class="interfaceName">${ilst.interfaceName}</a>
							</div>
							<ul class="method-div">
								<c:forEach var="mlst" items="${ilst.dubboMethodList }">
								<li>
									<a href="javascript:void(0);" class="methodName">${mlst.methodName}</a>
									<span>&nbsp;${mlst.methodDesc}</span>
									<div class="method-content-div" style="display:none;">
										<table>
											<tr><td>接口：</td><td>${ilst.interfaceName}</td></tr>
											<tr><td>方法：</td><td>${mlst.methodName}</td></tr>
											<tr><td>权限：</td><td>${mlst.accessType}</td></tr>
											<tr><td>描述：</td><td>${mlst.methodDesc}</td></tr>
											<tr><td>参数：</td>
												<td>
													<table style="border:0px;">
															<tr><th>源名称</th><th>别名</th><th>类型</th><th>描述</th></tr>
														<c:forEach var="plst" items="${mlst.dubboParamList }">
															<tr>
																<td>${plst.sourceName}</td>
																<td>${plst.name}</td>
																<td>${plst.type}</td>
																<td>${plst.desc}</td>
															</tr>
														</c:forEach>
													</table>
												</td>
											</tr>
											<tr><td>返回：</td><td>${mlst.returnType}</td></tr>
										</table>
									</div>
								</li>
								</c:forEach>
							</ul>
						</div>
					</c:forEach>
					
					<div class="model-flag-div">
						<a href="javascript:void(0);" class="model-flag">model</a>
					</div>
					<c:forEach var="model" items="${lst.dubboModelList }">
					<div class="model-div">
						<div class="model-name">
							<a href="javascript:void(0);" class="modelName">${model.name}</a>
						</div>
						<div class="model-fields-div">
							<table>
								<thead>
									<tr><th>名称</th><th>访问权限</th><th>类型</th><th>描述</th></tr>
								</thead>
								<tbody>
									<c:forEach var="field" items="${model.fieldList }">
									<tr>
										<td>${field.name }</td>
										<td>${field.accessType }</td>
										<td>${field.type }</td>
										<td>${field.desc }</td>
									</tr>
									</c:forEach>
								</tbody>
							</table>
						</div>
					</div>
					</c:forEach>
					
					<div class="enums-flag-div">
						<a href="javascript:void(0);" class="enums-flag">enums</a>
					</div>
					<c:forEach var="enm" items="${lst.dubboEnumList }">
					<div class="enums-div">
						<div class="enum-name">
							<a href="javascript:void(0);" class="enumName">${enm.name}</a>
							&nbsp;<span>${enm.desc}</span>
						</div>
						<div class="enum-constant-div">
							<table>
								<thead>
									<tr><th>成员值</th></tr>
								</thead>
								<tbody>
									<c:forEach var="ec" items="${enm.constants }">
									<tr>
										<td>${ec}</td>
									</tr>
									</c:forEach> 
								</tbody>
							</table>
						</div>
					</div>
					</c:forEach>
					
					
				</div>

			</div>
		</c:forEach>
	</div>
	<div class="method-detail-div">
		<div class="close-div"><a href="javascript:void(0);" class="close">关闭</a></div>
		<div class="content-div" >
			
		</div>
	</div>
	
</body>
</html>